<template>
  <div>
    <div class="header">
      <img src="../assets/images/fanhui.png" height="23" alt="" @click="back" />
      <div>客户列表信息</div>
      <div @click="btnClick">新增</div>
    </div>
    <div class="search">
      <van-search show-action placeholder="关键字查询">
        <template #action>
          <div style="color: #1f3695">搜索</div>
        </template>
      </van-search>
    </div>
    <div class="conList" v-for="item in records" :key="item.id" @click="clickFn(item.id)">
      <div>
        <span class="text">客户名称</span> <span>{{ item.custName }}</span>
      </div>
      <div>
        <span class="text">联系方式</span> <span>{{ item.telephone }}</span>
      </div>
      <div>
        <span class="text">公司名称</span> <span>{{ item.company }}</span>
      </div>
      <div>
        <span class="text">职务</span> <span>{{ item.position }}</span>
      </div>
      <div class="foot">
        <div>新增拜访</div>
        <div>拜访记录</div>
      </div>
    </div>

    <div class="footer">
      <div @click="btn">{{ title }}</div>
    </div>
  </div>
</template>

<script>
import { cust } from "../request/api";
export default {
  data() {
    return {
      records: [],
      size: 3,
      title: "展开更多",
    };
  },
  methods: {
      btnClick(){
          this.$router.push('/custXZ/')
      },
      clickFn(id){
          this.$router.push('/goodCust/'+id)
      },
    back() {
      this.$router.back();
    },
    btn() {
      if (this.title =="展开更多") {
        this.size = 10;
        this.title = "收起消息";
         this.custList();
      } else{
        this.size = 3;
        this.title = "展开更多";
        this.custList();
      }
     
    },
    custList() {
      cust({
        keyword: "",
        current: 1,
        size: this.size,
      }).then((res) => {
        if (res.errCode == 0) {
          let { records } = res.data;
          this.records = records;
        //   console.log(this.records);
        }
      });
    },
  },

  created() {
    this.custList();
    // let datas = {
    //     keyword:'',
    //   current: 1,
    //   size: 3,
    // };
    // let formData = new FormData();
    // for (let key in datas) {
    //   formData.append(key, datas[key]);
    // }
    // cust(formData).then((res) => {
    //   if (res.errCode == 0) {
    //      let {records} = res.data
    //      this.records=records
    //       console.log( this.records);
    //   }
    // });
  },
};
</script>
 
<style lang = "less" scoped>
.footer {
  margin-top: 32px;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: #fff;
  color: #003399;
}
.conList {
  margin-bottom: 10px;
  padding: 15px;
  padding-bottom: 0;
  background: #fff;
  div {
    .text {
      color: #999;
      margin-right: 15px;
    }
  }
  .foot {
    margin-top: 10px;
    border-top: 1px solid #999;
    height: 40px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    div {
      margin-left: 10px;
      background: blue;
      width: 100px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 15px;
    }
  }
}
* {
  padding: 0;
  margin: 0;
}
.header {
  width: 100vw;
  height: 64px;
  background: #003399;
  display: flex;
  justify-content: space-around;
  color: #fff;
  font-size: 22px;
  padding: 25px 10px;
  box-sizing: border-box;
}
.search {
  padding: 8px;
  box-sizing: border-box;
  background: #fff;
  border-bottom: 1px solid #e4e4e4;
  margin-bottom: 10px;
}
.van-search__content {
  border-radius: 20px;
}
</style>